<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Agregar universidad</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/spacelab.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/responsive.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/misestilos.css" %}">
        {% load staticfiles %}
        <link rel="stylesheet" href="{% static "css/menu_jquery.css" %}">
    </head>
    <body>

        {% include "topmenu.html" %} <!-- Top menu -->

        <div class="container">
            <div class="row-fluid">

                {% include "sidebar.html" %} <!-- Side bar -->

                <!-- Listado de universidades divididas por regiones -->
                <div class="span9">
                    {% if show_message_success %}
                    <div class="alert alert-success">
                        <button type="button" class="close" data-dismiss="alert">
                            &times;
                        </button>
                        {{mensaje_exito|safe}}
                    </div>
                    {% endif %}
                    {% if show_message_error %}
                    <div class="alert alert-error">
                        <button type="button" class="close" data-dismiss="alert">
                            &times;
                        </button>
                        {{mensaje_error|safe}}
                    </div>
                    {% endif %}

                    <!-- Universidades participantes agrupadas por region -->
                    <div class="page-header">
                        <h1>Agregar Universidad</h1>
                    </div>

                    <small><b>Campos con (*) son de caracter obligatorio para el registro.</b></small>
                    <form action="/plataforma/universidades/agregar_universidades/" method="post" name="registro" id = "registro">
                        <div class="form-horizontal well">
                            <div class="control-group"><!-- Nombre -->
                                <label for="nombre" class="control-label"><b>Nombre*</b></label>
                                <div class="controls">
                                    <input type="text" name="name" id = "name" class="textarea_agregar_univ">
                                    <div class="nameAlert"></div>
                                </div>
                            </div><!-- Nombre -->

                            <div class="control-group"><!-- Telefono -->
                                <label for="telefono" class="control-label"><b>Teléfono</b></label>
                                <div class="controls">
                                    <input type="text" name="cod_pais" id ="cod_pais" class="textarea_agregar_univ_tel" placeholder="Cod.País">
                                    <input type="text" name="cod_ciudad" id ="cod_ciudad" class="textarea_agregar_univ_tel" placeholder="Cod. Área">
                                    <input type="text" name="telefono" id ="telefono" class="textarea_agregar_univ" placeholder="Num. Tel.">
                                </div>
                            </div><!-- /Telefono -->

                            <div class="control-group"><!-- URL -->
                                <label for="url" class="control-label"><b>URL*</b></label>
                                <div class="controls">
                                    <input type="text" name="URL" id = "URL" class="textarea_agregar_univ" placeholder="www.ejemplo.com" onBlur="javascript:ajax_message_url(event)">
                                    <div class="result_url"></div>
                                </div>
                            </div><!-- URL -->                            

                            <div class="control-group"><!-- Siglas -->
                                <label for="nombre" class="control-label"><b>Siglas</b></label>
                                <div class="controls">
                                    <input type="text" name="sigla" id = "sigla" class="textarea_agregar_univ">
                                </div>
                            </div><!-- Siglas -->

                            <div class="control-group"><!-- URL -->
                                <label for="nombre" class="control-label"><b>Dirección</b></label>
                                <div class="controls">
                                    <input type="text" name="Direccion" id = "Direccion" class="textarea_agregar_univ">
                                </div>
                            </div><!-- URL -->

                            <div class="control-group"><!-- Pais -->
                                <label for="pais" class="control-label"><b>País*</b></label>
                                <div class="controls">
                                    <select name="paises" id = "paises" class="selectarea_agregar_univ" onBlur="javascript:message_paises(event)">
                                        <option value="">| Elije un pais |</option>
                                        {% for nombre, codigo in lista_sinc_paises %}
                                        <option value="{{ nombre }}">{{ codigo }}</option>
                                        {% endfor %}
                                    </select>
                                    <div class="contentPais"></div>
                                </div>
                            </div><!-- /Pais -->                            

                            <div class="control-group"><!-- Administrador -->
                                <label for="administrador" class="control-label"><b>Administrador*</b></label>
                                <div class="controls">
                                    <select name="administrador" id = "administrador" class="selectarea_agregar_univ" onBlur="javascript:message_administrador(event)">
                                        <option value="">| Elije un administrador |</option>
                                        {% for id_user, nombre_user in usuarios %}
                                        <option value="{{id_user}}">{{nombre_user}}</option>
                                        {%endfor%}
                                    </select>

                                    <div class="contentAdmin"></div>

                                </div>
                            </div><!-- Administrador -->
                            
                            <div class="control-group" align="center">
                                <button class="btn btn-primary" type="button" id = "form_user_univ">Crear Universidad & Administrador &raquo</button>
                            </div>

                            {% csrf_token %}

                            <div class="form-actions" align="center">
                                <hr>
                                <button class="btn btn-primary" onClick="javascript:myfunc(event)">Guardar</button>
                            </div>
                            <!-- Botones de opciones -->

                        </div>
                    </form>
                    <!-- form -->
                </div>
            </div>
            <!-- /row -->

            {% include "footer.html" %} <!-- Footer -->
        </div>
        <!-- /container -->

        <!-- JS files -->
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/jquery.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/bootstrap.js" %}"></script>
        {% load staticfiles %} <script type="text/javascript" src="{% static "js/menu_jquery.js" %}"></script>

        <script>
            function myfunc(event) {
                //Control de los campos required
                if ($("#URL").val() == "") {
                    $(".result_url").html("<div class='alert alert-error'>Ingrese una url válida para la universidad.</div>");
                    event.preventDefault();
                }
                if ($("#name").val() == "") {
                    $(".nameAlert").html("<div class='alert alert-error'>Ingrese un nombre para la universidad.</div>");
                    event.preventDefault();
                }
                if ($("#administrador").val() == "") {
                    $(".contentAdmin").html("<div class='alert alert-error'>Seleccione un administrador para la universidad. Si no existe, debe crearlo.</div>");
                    event.preventDefault();
                }
                if ($("#paises").val() == "") {
                    $(".contentPais").html("<div class='alert alert-error'>Seleccione un país. Si no existe, debe crearlo.</div>");
                    event.preventDefault();
                }
            }

            //***************
            function ajax_message_url() {
                $(".result_url").html("");
                url = $("#URL").val()
                if ((url != "") && validateUrlFormat(url)) {
                    $.ajax({
                        type : "POST",
                        url : "/plataforma/universidades/ajax_message_url/",
                        data : {
                            'url' : url
                        },
                        cache : false,
                        success : function(returndata) {
                            if (returndata.tipo == "error")
                                $(".result_url").html("<div class='alert alert-error'>" + returndata.message + "</div>");
                            else if (returndata.tipo == "exito")
                                $(".result_url").html("<div class='alert alert-success'>" + returndata.message + "</div>");
                        }
                    });
                } else if(!validateUrlFormat(url)){
                    $(".result_url").html("<div class='alert alert-error'>Ingrese una url válida para la universidad.</div>");
                }
            }

            //*************************
            function validateUrlFormat(url) {
                var re = /^((http:\/\/www\.|https:\/\/www\.|http:\/\/|https:\/\/|www\.)[a-zA-Z0-9\-]+(?:\.[a-zA-Z0-9\-]+)*\.[a-zA-Z]{2,6}(?:\/?|(?:\/[\w\-]+)*)(?:\/?|\/\w+\.[a-zA-Z]{2,4}(?:\?[\w]+\=[\w\-]+)?)?(?:\&[\w]+\=[\w\-]+)*)$/;
                return re.test(url);
            }

            //************************
            $("#form_user_univ").click(function() {
                $("#registro").attr("action", "/plataforma/universidades/formulario_universidad_user/");
                $("#registro").submit();
            });

            //vaciar los div de mensajes Alert
            $("#administrador").blur(function() {
                if ($("#administrador").val() != "")
                    $(".contentAdmin").html("");
            });

            $("#paises").blur(function() {
                if ($("#paises").val() != "")
                    $(".contentPais").html("");
            });
            /*$("#URL").blur(function() {
                $(".result_url").html("");
            });*/
            $("#name").blur(function() {
                $(".nameAlert").html("");
            });

            //************************
            function message_administrador() {
                if ($("#administrador").val() == "") {
                    $(".contentAdmin").html("<div class='alert alert-error'>Seleccione un administrador para la universidad. Si no existe, debe crearlo.</div>");
                } else {
                    $(".contentAdmin").html("");
                }
            }

            //************************
            function message_paises() {
                if ($("#paises").val() == "") {
                    $(".contentPais").html("<div class='alert alert-error'>Seleccione un país. Si no existe, debe crearlo.</div>");
                } else {
                    $(".contentPais").html("");
                }
            }

        </script>
    </body>
</html>